<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<h:head>
</h:head>
<h:body>
	<rich:panel id="panelListCliente">
		<f:facet name="header">
			<h:outputText value="#{labels['titleListPanelClient']}" styleClass="panelTitle"/>
		</f:facet>

		<h:form id="formListCliente1">

			<rich:toolbar height="30px" id="menuListCliente">
				<rich:dropDownMenu>
					<f:facet name="label">
						<h:panelGrid>
							<h:outputText value="#{labels['orderBy']}" styleClass="menuLabel"/>
						</h:panelGrid>
					</f:facet>

					<rich:menuItem label="#{labels['code']}"
						action="#{clienteBean.ordenaClientesListById()}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['name']}"
						action="#{clienteBean.ordenaClientesListByNombre()}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['phoneNumber']}"
						action="#{clienteBean.ordenaClientesListByTelefono()}" />
				</rich:dropDownMenu>
			</rich:toolbar>
		</h:form>
		<h:form id="formListCliente2">
			<div align="center">
				<rich:dataTable id="tableListCliente"
					value="#{clienteBean.clientesList}" var="v_cliente"
					iterationStatusVar="itCliente" rows="20" width="300px">

					<f:facet name="caption">
						<h:outputText value="#{labels['titleListPanelClient']}" />
						<a4j:commandLink rendered="#{clienteBean.sessionBean.activaPanelErrorCliente}">
							<h:graphicImage value="/page/images/popcorn-icon.png" alt="error" />
							<rich:tooltip styleClass="error">
								<p>#{movimientoBean.sessionBean.msjPanelError}</p>
								<p>#{movimientoBean.sessionBean.toolTipError}</p>
							</rich:tooltip>
						</a4j:commandLink>
					</f:facet>


					<rich:column>
						<f:facet name="header">#{labels['code']}</f:facet>
						<h:outputText value="#{v_cliente.clienteId}" id="clienteId" />

					</rich:column>
					<rich:column sortBy="#{v_cliente.nombre}">
						<f:facet name="header">#{labels['name']}</f:facet>
						<h:outputText value="#{v_cliente.nombre}" id="nombreCli" />

					</rich:column>
					<rich:column>
						<f:facet name="header">#{labels['phone']}</f:facet>
						<h:outputText value="#{v_cliente.telefono}" id="telefonoCli" />

					</rich:column>
					<rich:column>
						<f:facet name="header">#{labels['address']}</f:facet>
						<h:outputText value="#{v_cliente.direccion}" id="direccionCli" />
					</rich:column>

					<rich:column>
						<f:facet name="header">#{labels['delete']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" execute="@this"
								render="@form"
								oncomplete="#{rich:component('confirmPaneCliente')}.show()">
								<h:graphicImage value="/page/images/delete.png" alt="borrar" />
								<a4j:param value="#{v_cliente.clienteId}"
									assignTo="#{sessionBean.currentIndex}" />
							</a4j:commandLink>
						</div>
					</rich:column>
					<rich:column>
						<f:facet name="header">#{labels['edit']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" render="editGridCliente"
								execute="@this"
								oncomplete="#{rich:component('editPaneCliente')}.show()">
								<h:graphicImage value="/page/images/edit.png" alt="editar" />
								<a4j:param value="#{v_cliente.clienteId}"
									assignTo="#{sessionBean.currentIndex}" />
								<f:setPropertyActionListener target="#{clienteBean.cliente}"
									value="#{v_cliente}" />
							</a4j:commandLink>
						</div>
					</rich:column>

					<f:facet name="footer">
						<rich:dataScroller />
					</f:facet>

				</rich:dataTable>

				<a4j:jsFunction name="removeCliente"
					action="#{clienteBean.borrarCliente}" render="tableListCliente"
					execute="@this"
					oncomplete="#{rich:component('confirmPaneCliente')}.hide();" />

				<rich:popupPanel id="confirmPaneCliente" autosized="true">
					<p>#{labels['questionDelete']}</p>
					<p>con el id: #{clienteBean.sessionBean.currentIndex}</p>
					<br />
					<a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('confirmPaneCliente')}.hide(); return false;" />
					<a4j:commandButton value="#{labels['delete']}"
						onclick="removeCliente(); return false;" />
				</rich:popupPanel>

				<rich:popupPanel header="#{labels['popupListClient']}"
					id="editPaneCliente" domElementAttachment="parent" width="500"
					height="200">
					<h:panelGrid columns="3" id="editGridCliente">
						<h:outputText value="#{labels['code']}" />
						<h:outputText value="#{clienteBean.sessionBean.currentIndex}" />
						<h:outputText value="" />

						<h:outputText value="#{labels['name']}" />
						<h:inputText value="#{clienteBean.cliente.nombre}" required="true"
							maxlength="40" requiredMessage="Es necesario ingresar un nombre"
							id="nombreCliField" label="nombreCliField" />
						<rich:message id="nombreMsg" for="nombreCliField" />

						<h:outputText value="#{labels['phone']}" />
						<h:inputText value="#{clienteBean.cliente.telefono}"
							required="true" maxlength="20" id="telefonoCliField"
							label="telefonoCliField"
							validatorMessage="#{labels['messageValidatePhonePattern']}">
							<f:validateRegex pattern="#{labels['phonePattern']}" />
						</h:inputText>
						<rich:message id="telefonoMsg" for="telefonoCliField" />

						<h:outputText value="#{labels['address']}" />
						<h:inputText value="#{clienteBean.cliente.direccion}"
							required="true" maxlength="80"
							id="direccionCliField" label="direccionCliField" />
						<rich:message id="direccionMsg" for="direccionCliField" />

					</h:panelGrid>
					<a4j:commandButton value="#{labels['save']}"
						action="#{clienteBean.actualizarCliente}"
						render="tableListCliente" execute="editPaneCliente"
						oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPaneCliente')}.hide();}" />
					<a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('editPaneCliente')}.hide(); return false;" />
				</rich:popupPanel>

			</div>

		</h:form>
	</rich:panel>

</h:body>
</html>